<template>
	<view class="index-content content-20 page-bg">
		<view class="index-search" @click="link('/pages/index/search')">
			<image class="search-icon" src="../../static/common/icon_02.png"></image>
			<text class="search-text">请输入关键词进行搜索</text>
		</view>

		<view class="banner-wrap">
			<swiper class="swiper banner-swiper" autoplay circular indicator-dots indicator-color="#938e8d" indicator-active-color="#fff"
			 active-class="indicator-active">
				<swiper-item class="banner-item" v-for="item in banner" :key='item.id'>
					<image class="banner-img" :src="item.imgUrl"></image>
				</swiper-item>
			</swiper>
		</view>

		<view class="notice-wrap">
			<image src="../../static/item_01.png" class="notice-icon"></image>

			<swiper class="swiper notice-con" vertical autoplay interval="3000">
				<swiper-item v-for="item in notice" :key='item.id'>
					<view class="notice-item">{{item.title}}</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="nav-wrap">
			<view class="nav-item" @click="link('/pages/shop/shopCate')">
				<image src="../../static/common/menu_01.png" class="nav-img" mode=""></image>
				<view class="nav-title">商品分类</view>
			</view>
			<view class="nav-item" @click="link('/pages/mine/order?status=all', true)">
				<image src="../../static/common/menu_02.png" class="nav-img" mode=""></image>
				<view class="nav-title">我的订单</view>
			</view>
			<view class="nav-item" @click="link('/pages/mine/address', true)">
				<image src="../../static/common/menu_03.png" class="nav-img" mode=""></image>
				<view class="nav-title">收货地址</view>
			</view>
			<view class="nav-item" @click="link('/pages/shop/shopInPay', true)">
				<image src="../../static/common/menu_04.png" class="nav-img" mode=""></image>
				<view class="nav-title">商家入驻</view>
			</view>
			<!-- #ifdef H5 -->
			<view class="nav-item" @click="link('/pages/share/share', true)">
				<image src="../../static/common/menu_05.png" class="nav-img" mode=""></image>
				<view class="nav-title">邀请有礼</view>
			</view>
			<!-- #endif -->
			<!-- #ifndef H5 -->
			<view class="nav-item" @click="link('/pages/share/shareApp', true)">
				<image src="../../static/common/menu_05.png" class="nav-img" mode=""></image>
				<view class="nav-title">邀请有礼</view>
			</view>
			<!-- #endif -->
		</view>
		
		<view class="column-section" v-if="assembleList.length>0">
			<view class="column-title">拼团专区<image class="column-tag" src="../../static/item_02.png"></image>
			</view>
			<view class="column-more link" @click="link('/pages/shop/shopTeamList')">查看更多</view>
		</view>

		<!-- <view class="tpl-pt" v-show="assembleList.length > 0">
			<scroll-view :scroll-x="true" class="tpl-pt__scroll">
				<view class="tpl-pt__item" v-for="item in assembleList" :key='item.id' @click="link('/pages/shop/shopTeamDetail?id='+item.id)">
					<image class="tpl-pt__img" :src="item.imgUrl" mode=""></image>
					<view class="tpl-pt__title">{{item.comTitle}}</view>
					<view class="tpl-pt__price">
						<text class="price yuan">{{item.presentPrice | formatMoney}}</text>
						<text class="origin-price yuan" v-if="item.presentPrice !== item.fixedPrice">{{item.fixedPrice | formatMoney}}</text>
					</view>
					<view class="tpl-pt__num">{{item.askNum}}人团</view>
				</view>
			</scroll-view>
		</view> -->
		
		<!-- 拼团列表换成这种 -->
		<view class="tpl-pt" v-show="assembleList.length > 0">
			<view class="tpl-pt__item" v-for="item in assembleList" :key='item.id' @click="link('/pages/shop/shopTeamDetail?id='+item.id)">
				<image class="tpl-pt__img" :src="item.imgUrl" mode=""></image>
				<view class="tpl-pt__title">{{item.comTitle}}</view>
			</view>
		</view>
		

		<view class="column-section" v-show="hotList.length>0">
			<view class="column-title">热销爆品</view>
			<view class="column-more link" @click="link('/pages/shop/shopListHot')">查看更多</view>
		</view>

		<view class="tpl-shop" v-if="hotList.length>0">
			<view class="tpl-shop__item" v-for="item in hotList" :key='item.id' @click="link('/pages/shop/shopDetail?id='+item.id)">
				<image class="tpl-shop__img" :src="item.imgUrl" mode=""></image>
				<view class="tpl-shop__title">{{item.comTitle}}</view>
				<view class="tpl-shop__price">
					<text class="price yuan">{{item.presentPrice | formatMoney}}</text>
					<text class="origin-price yuan" v-if="item.presentPrice !== item.fixedPrice">{{item.fixedPrice | formatMoney}}</text>
				</view>
			</view>
		</view>

		<view class="column-section" v-if="newList.length>0">
			<view class="column-title">新品甄选</view>
			<view class="column-more link" @click="link('/pages/shop/shopListNew')">查看更多</view>
		</view>

		<view class="tpl-shop" v-if="newList.length>0">
			<view class="tpl-shop__item" v-for="item in newList" :key='item.id' @click="link('/pages/shop/shopDetail?id='+item.id)">
				<image class="tpl-shop__img" :src="item.imgUrl" mode=""></image>
				<view class="tpl-shop__title">{{item.comTitle}}</view>
				<view class="tpl-shop__price">
					<text class="price yuan">{{item.presentPrice | formatMoney}}</text>
					<text class="origin-price yuan" v-if="item.presentPrice !== item.fixedPrice">{{item.fixedPrice | formatMoney}}</text>
				</view>
			</view>
		</view>

		<view class="column-section" style="display: none;">
			<view class="column-title">为你推荐</view>
			<view class="column-more link" @click="link('/pages/shop/shopListRecommend')">查看更多</view>
		</view>

		<view class="tpl-shop" style="display: none;">
			<view class="tpl-shop__item" @click="link('/pages/shop/shopDetail')">
				<image class="tpl-shop__img" src="../../static/img_01.png" mode=""></image>
				<view class="tpl-shop__title">商品标铁商品标铁商品标铁商品标铁</view>
				<view class="tpl-shop__price">
					<text class="price yuan">19.8</text>
					<text class="origin-price yuan">19.8</text>
				</view>
				<view class="btn once-buy">立即购买</view>
			</view>
			<view class="tpl-shop__item" @click="link('/pages/shop/shopDetail')">
				<image class="tpl-shop__img" src="../../static/img_01.png" mode=""></image>
				<view class="tpl-shop__title">商品标铁商品标铁商品标铁商品标铁</view>
				<view class="tpl-shop__price">
					<text class="price yuan">19.8</text>
					<text class="origin-price yuan">19.8</text>
				</view>
				<view class="btn once-buy">立即购买</view>
			</view>
			<view class="tpl-shop__item" @click="link('/pages/shop/shopDetail')">
				<image class="tpl-shop__img" src="../../static/img_01.png" mode=""></image>
				<view class="tpl-shop__title">商品标铁商品标铁商品标铁商品标铁</view>
				<view class="tpl-shop__price">
					<text class="price yuan">19.8</text>
					<text class="origin-price yuan">19.8</text>
				</view>
				<view class="btn once-buy">立即购买</view>
			</view>

			<image @click="backTop" :class="isShow?'back-top back-top-active':'back-top'" src="../../static/item_40.png" mode=""></image>
		</view>
		<footerInfo></footerInfo>
	</view>
</template>

<script>
	import menu_01 from '../../static/common/menu_01.png'
	import menu_02 from '../../static/common/menu_02.png'
	import menu_03 from '../../static/common/menu_03.png'
	import menu_04 from '../../static/common/menu_04.png'
	import menu_05 from '../../static/common/menu_05.png'

	import common from '../../utils/common.js'
	import { api } from '../../utils/api.js'
	import footerInfo from '../../components/footerInfo.vue'

	export default {
		data() {
			return {
				code: '', // 从微信获取的code，只能使用一次
				state: '', // 微信返回的state信息
				sourceUserId: '', // 源用户id
				isShow: false, // 控制返回顶部按钮,

				banner: [],
				notice: [],
				hotList: [],
				newList: [],
				assembleList: []
			}
		},
		onLoad(options) {
			console.log('onload-options');
			console.log(options);
			// #ifdef H5
			let url = window.location.href || ''
			if(url.includes('sourceUserId')) {
				let pos = url.indexOf('sourceUserId')
				let paramsStr = url.substring(pos + 'sourceUserId='.length)
				let sourceUserId = ''
				let shopDetailId = ''
				let shopTeamDetailId = ''
				let shopTeamShareDetailId = ''
				if(paramsStr.indexOf('shopDetail') !== -1) {
					let paramsArr = paramsStr.split('&shopDetailId=')
					sourceUserId = paramsArr[0]
				    shopDetailId = paramsArr[1]
				}else if(paramsStr.indexOf('shopTeamDetail') !== -1){
					let paramsArr = paramsStr.split('&shopTeamDetailId=')
					sourceUserId = paramsArr[0]
					shopTeamDetailId = paramsArr[1]
				}else if(paramsStr.indexOf('shopTeamShareDetailId') !== -1) {
					let paramsArr = paramsStr.split('&shopTeamShareDetailId=')
					sourceUserId = paramsArr[0]
					shopTeamShareDetailId = paramsArr[1]
				}else{
					sourceUserId = url.substring(pos + 'sourceUserId='.length)
				}
				options.sourceUserId = sourceUserId
				options.shopDetailId = shopDetailId
				options.shopTeamDetailId = shopTeamDetailId
				options.shopTeamShareDetailId = shopTeamShareDetailId
				console.log(options);
			}
			// #endif
			this.getBanner()
			this.getNotice()
			this.getGoodsList()
			
			let shopDetailId = options.shopDetailId || ''
			let shopTeamDetailId = options.shopTeamDetailId || ''
			let shopTeamShareDetailId = options.shopTeamShareDetailId || ''
			let code = options.code || ''
			let state = options.state || ''
			let sourceUserId = options.sourceUserId || ''
			
			if (sourceUserId) {
				common.setStorage('sourceUserId', sourceUserId)
			}
			if (code) {
				common.setStorage('code', code)
			}
			
			if (shopDetailId) {
				common.setStorage('shopDetailId', shopDetailId)
			}
			
			if (shopTeamDetailId) {
				common.setStorage('shopTeamDetailId', shopTeamDetailId)
			}
			
			if (shopTeamShareDetailId) {
				common.setStorage('shopTeamShareDetailId', shopTeamShareDetailId)
			}
			// 检查登录过期
			// this.checkLoginIsExpire()
		},

		onShow() {
			console.log('每次回到首页都会执行：onShow-index');
			if(this.$isLogin()) {
				console.log('已经登录，准备跳转详情');
				this.goDetail()
			}else{
				this.uniLogin()
			}
		},

		methods: {
			link(url, isLogin) {
				if(url === '/pages/shop/shopCate') {
					uni.switchTab({
						url
					})
					return
				}
				this.$link(url)
			},

			backTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},

			getBanner() {
				let items = api.bannerList({}, (res) => {
					this.banner = res.items
				}) 
			},

			getNotice() {
				let items = api.getNoticeList({}, (res) => {
					this.notice = res.items
				})
			},

			getGoodsList() {
				let items = api.getRecommendList({
					pageIndex: 1,
					pageSize: 6,
					listType: 0
				}, (res) => {
					if (Object.keys(res).length > 0) {
						this.hotList = res.hotList
						this.assembleList = res.assembleList
						this.newList = res.newList
					}
				})
			},

			getUserInfo() {
				api.getUserInfoAsync({}, (res) => {
					res.token = this.$isLogin()
					common.setUserInfo(res)
				})
			},

			checkLogin(options) {
				if (!this.$isLogin()) {
					this.uniLogin(options)
				} else {
					this.checkLoginIsExpire()
				}
			},
			
			goDetail() {
				let shopDetailId = common.getStorage('shopDetailId') || ''
				let shopTeamDetailId = common.getStorage('shopTeamDetailId') || ''
				let shopTeamShareDetailId = common.getStorage('shopTeamShareDetailId') || ''
				if(shopDetailId) {
					this.$link('/pages/shop/shopDetail?id='+shopDetailId)
				}
				if(shopTeamDetailId) {
					this.$link('/pages/shop/shopTeamDetail?id='+shopTeamDetailId)
				}
				if(shopTeamShareDetailId) {
					this.$link('/pages/shop/shopTeamDetailShare?id='+shopTeamShareDetailId)
				}
			},

			uniLogin(options) {
				// #ifdef H5 
				this.h5Login(options)
				// #endif 

				// #ifndef H5 
				this.appLogin()
				// #endif 
			},

			// 检查登录是否过期
			checkLoginIsExpire() {
				let userInfo = common.getUserInfo()
				let nowTime = new Date().getTime()
				if (nowTime > userInfo.expireTime) {
					uni.removeStorageSync('user')
				}
			},

			h5Login() {
				console.log('h5去登录');
				let that = this
				let code = common.getStorage('code') || ''
				let sourceUserId = common.getStorage('sourceUserId') || ''
				// h5登录
				if (!this.$isLogin()) { // 没有用户信息就去授权
					if (!code) {
						window.location.href = common.apiHost + '/Wechat/GetWechatCode'
					} else {
						// 没有登录有code就去登录
						api.loginAsync({
							code,
							sourceUserId: sourceUserId || common.defaultId
						}, (res) => {
							let now = new Date()
							let nowTime = now.getTime()
							let expireTime = now.setTime(nowTime + 5 * 24 * 60 * 60 * 1000)
							res.expireTime = now.getTime()
							common.setUserInfo(res)
							uni.removeStorageSync('code')
							uni.removeStorageSync('sourceUserId')
							if (res.subscribe == '0') { // 未关注
								uni.redirectTo({
									url: '/pages/login/qrcode'
								})
							}else{
								// 已关注，跳去详情页
								that.goDetail()
							}
						})
					}
				}
			},

			appLogin() {
				let that = this
				let userInfo = common.getUserInfo()
				if(Object.keys(common.getUserInfo()).length <= 0){
					uni.login({
						provider: 'weixin',
						success: function(loginRes) {
							// 获取用户信息
							uni.getUserInfo({
								provider: 'weixin',
								success: function(res) {
									console.log('用户信息3333：');
									/* 
									 {
										"openId": "oRrdQt36pYVLZJ42kGb69Z6N57WA",
										"nickName": "云在天上飘",
										"gender": 1,
										"city": "昆明",
										"province": "云南",
										"country": "中国",
										"avatarUrl": "http://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83epEDcribQWsOZibULPSD5vK9eRIaoFRPwWYwdTFR6LFpaIEAxgkaszf03Alzy5xPsz6SdGYibADBq11Q/132",
										"unionId": "oU5Yyt9jvzMkqmvrfU-GEH8TLYWA"
									 }
									 */
									
									res = res.userInfo
									let sourceUserId = common.getStorage('sourceUserId') || common.defaultId
									let temp = { 
										openId: res.openId, 
										nickName: res.nickName, 
										avatarUrl: res.avatarUrl, 
										unionId: res.unionId, 
										gender: res.gender, 
										sourceUserId 
									}
									api.loginFromAppAsync({
										openId: res.openId,
										nickName: res.nickName, 
										avatarUrl: res.avatarUrl, 
										unionId: res.unionId, 
										gender: res.gender, 
										sourceUserId 
									}, res2 => {
										let now = new Date()
										let nowTime = now.getTime()
										let expireTime = now.setTime(nowTime + 5 * 24 * 60 * 60 * 1000)
										res2.expireTime = now.getTime()
										common.setUserInfo(res2)
										uni.removeStorageSync('sourceUserId')
										uni.removeStorageSync('code')
										that.goDetail()
									})
								}
							});
						}
					});
				}
			}
		},
		
		onPageScroll(e) {
			let scrollTop = e.scrollTop
			if (scrollTop > 200) {
				this.isShow = true
			} else {
				this.isShow = false
			}
		},
		components: {
			footerInfo
		}
	}
</script>

<style lang="less" scoped>
	@import url('../../app.less');
	.tpl-pt{
		    width: 100%;
		    display: flex;
		    flex-wrap: wrap;
		    justify-content: space-between;
	}
	.tpl-pt__item{
		margin-bottom: 20upx;
		width: 48.5%;
		margin-right: 0;
	}
	.tpl-pt__title{
		text-align: center;
	}
	.back-top {
		width: 70rpx;
		height: 70rpx;
		border-radius: 100%;
		display: block;
		position: fixed;
		right: 20rpx;
		bottom: 140rpx;
		transition: all 0.5s linear;
		opacity: 0;
		transform: scale(0, 0);
	}

	.back-top-active {
		opacity: 1;
		transform: scale(1, 1);
	}

	.index-content {
		background: @bg-dark-color;
	}

	.banner-wrap {
		width: 710upx;
		height: 300upx;
		border-radius: 15upx;
	}

	.banner-swiper,
	.banner-swiper,
	.banner-item,
	.banner-img {
		width: 100%;
		height: 100%;
	}

	.notice-wrap {
		width: 100%;
		height: 60upx;
		padding: 10upx 0;
		line-height: 60upx;
		.flex-base;
		justify-content: flex-start;
	}

	.notice-icon {
		width: 87upx;
		height: 22upx;
		margin-right: 30upx;
		flex-shrink: 0;
	}

	.notice-con {
		flex-grow: 2;
		height: 100%;
	}

	.notice-item {
		width: 100%;
		height: 100%;
		font-size: @font-size-24;
		color: @font-base-color;
		.text-overflow;
	}

	.nav-wrap {
		width: 100%;
		padding: 20upx 0;
		background: @bg-base-color;
		border-radius: 10upx;
		.flex-base;
	}

	.nav-item {
		width: 20%;
		text-align: center;
		.flex-base;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}

	.nav-img {
		width: 85upx;
		height: 85upx;
		border-radius: 100%;
		margin-bottom: 20upx;
	}

	.nav-title {
		font-size: @font-size-24;
		color: @font-base-color;
	}

	.column-section {
		width: 100%;
		height: 40upx;
		line-height: 40upx;
		margin: 30upx 0 30upx 0;
		.flex-base;
	}

	.column-title {
		font-weight: bold;
		color: @font-base-color;
		font-size: @font-size-32;
		.flex-base;

	}

	.column-tag {
		width: 70upx;
		height: 30upx;
		margin-left: 10upx;
		display: inline-block;
	}

	.column-more {
		color: @font-dark-color;
		font-size: @font-size-24;
	}


	.once-buy {
		height: 50rpx;
		line-height: 50rpx;
		padding: 0 30rpx;
		.f24;
		margin-top: 14rpx;
	}
</style>
